<template>
    <div class="top-left">
        <div class="left-a"></div>
        <div class="left-b"></div>
        <div class="left-c"></div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import $ from 'jquery'
import { ref, reactive, toRefs, computed, inject, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const data = reactive({})

function init(obj) {
    let myLeft = echarts.init(document.querySelector(".left-a"))
    let x = []
    let y = []
    // console.log(obj)
    obj.forEach(item => {
        x.push(item.nation)
        y.push(item.addConfirm)
    })
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '15%',
            right: '3%',
            left: '20%',
            bottom: '20%'
        },
        xAxis: [{
            type: 'category',
            data: x,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            },
            axisLabel: {
                margin: 10,
                color: '#e2e9ff',
                textStyle: {
                    fontSize: 7
                },
            },
        }],
        yAxis: [{
            axisLabel: {
                formatter: '{value}',
                color: '#e2e9ff',
            },
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: y,
            barWidth: '10px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [30, 30, 30, 30],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                }
            }
        }]
    };
    myLeft.setOption(option);
    window.addEventListener(
        "resize",
        function (e) {
            myLeft.resize();

        },
        false
    );
}

function leftcon(obj) {
    var myLeft = echarts.init(document.querySelector(".left-b"))
    //  console.log(obj,97)
    let tow = {
        o: [],
        t: [],
        s: [],
        f: [],
        fu: []
    }
    let x = [];
    obj.forEach(item => {
        // console.log(item, 101);
        x.push(item.date)
        item.statis.亚洲 != undefined ? tow.o.push(item.statis.亚洲) : "70863"
        item.statis.北美洲 != undefined ? tow.t.push(item.statis.北美洲) : ""
        item.statis.大洋洲 != undefined ? tow.s.push(item.statis.大洋洲) : "4086"
        item.statis.欧洲 != undefined ? tow.f.push(item.statis.欧洲) : ""
        item.statis.其他 != undefined ? tow.fu.push(item.statis.其他) : "712"
    })
    var option = {
        // title: {
        //     text: '大洲感染总人数趋势图'
        // },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
            left: '5%',
            right: '10%',
            bottom: '3%',
            top: "25%",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: x
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '亚洲',
                type: 'line',
                smooth: true,
                data: tow.o
            },
            {
                name: '北美洲',
                type: 'line',
                smooth: true,
                data: tow.t
            },
            {
                name: '大洋洲',
                type: 'line',
                smooth: true,
                data: tow.s
            },
            {
                name: '欧洲',
                type: 'line',
                smooth: true,
                data: tow.f
            },
            {
                name: '其他',
                type: 'line',
                smooth: true,
                data: tow.fu
            }
        ]
    };
    myLeft.setOption(option);
    window.addEventListener(
        "resize",
        function (e) {
            myLeft.resize();

        },
        false
    );
}

function leftfoot(obj) {
    let myLeft = echarts.init(document.querySelector(".left-c"))
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '10%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: obj[0].statis.北美洲, name: '北美洲' },
                    { value: obj[0].statis.欧洲, name: '欧洲' },
                ]
            }
        ]
    };

    myLeft.setOption(option);
    getDefaultSelected(myLeft)
    function getDefaultSelected(myLeft) {
        let index = 0;
        myLeft.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0,
        });
        myLeft.on('mouseover', (e) => {
            if (e.dataIndex !== index) {
                myLeft.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: index,
                });
            }
        });
        myLeft.on('mouseout', (e) => {
            index = e.dataIndex;
            myLeft.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: e.dataIndex,
            });
        });
    }


    myLeft.setOption(option);
    window.addEventListener(
        "resize",
        function (e) {
            myLeft.resize();

        },
        false
    );
}

onMounted(() => {
    let datas = []
    let fn = new Promise((resolve, reject) => {
        $.ajax({
            url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
            dataType: 'jsonp',
            success(res) {
                // console.log(res,28);
                let listData = JSON.parse(res.data)
                // console.log(listData, 30);
                let left1 = listData.countryAddConfirmRankList
                let left2 = listData.continentStatis
                resolve({ left1, left2 })
            },
        })
    })
    fn.then(res => {
        // console.log(res, 36);
        datas = res
        init(datas.left1)
        leftcon(datas.left2)
        leftfoot(datas.left2)
    })
})
</script>

<style scoped lang='scss'>
.top-left {
    flex: 2;
    width: 100%;
    height: calc(100% - 80px);
    font-size: 20px;

    .left-a {
        width: 570px;
        height: 330px;
    }

    .left-b {
        width: 570px;
        height: 330px;
    }

    .left-c {
        width: 570px;
        height: 330px;
    }

    // div {
    //     // width: 100%;
    //     height: 343px;
    //     padding: 10px;
    // }
}
</style>